<template>
    <div class="common-layout">
        <el-container>
            <!--菜单组件-->
            <el-header>
                <Menu></Menu>
            </el-header>
            <el-container class="mineContainer">
                <el-aside width="220px">
                    <el-row class="tac">
                        <el-col :span="12">
                            <el-menu
                                    default-active="1"
                                    active-text-color="#ffd04b"
                                    background-color="#545c64"
                                    class="el-menu-vertical-demo"
                                    text-color="#fff"
                            >
                                <el-menu-item index="1" @click="jumpPersonalInfo">
<!--                                    <el-icon><icon-menu /></el-icon>-->
                                    <el-icon ><Edit /></el-icon>
                                    <span >个人信息</span>
                                </el-menu-item>
                                <el-menu-item index="2" @click="jumpTeaRegister"
                                              v-if="is_teacher!=2"
                                              :disabled="isDisabled">
                                    <el-icon><icon-menu /></el-icon>
                                    <span >学园认证</span>
                                </el-menu-item>

                                <el-menu-item index="4" @click="jumpAccount" >
                                    <el-icon><setting /></el-icon>
                                    <span>账号管理</span>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script setup>
    import { ref } from 'vue'
    import {useRouter} from 'vue-router'
    import {useStore} from 'vuex'
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
        Edit
    } from '@element-plus/icons-vue'

    const store = useStore();
    // const teacherName = store.getters.getTeacherUsername;
    const is_teacher = store.getters.getIsTeacher;
    const username = store.getters.getUsername;
    const isCollapse = ref(true)
    const router = useRouter();
    const isDisabled = ref(false);
    const jumpTeaRegister =()=>{
        router.push({path:"/mine/tearegister"})
    }
    const jumpCourse = ()=>{
        router.push({path:"/mine/course"})
    }
    const jumpPersonalInfo=()=>{
        router.push({path:"/mine/personalInfo"})
    }
    const jumpAccount = ()=>{
        router.push({path:"/mine/accountManagement"})
    }
    const jumpToExamine = ()=>{
        router.push({path:'/mine/examiningCourse'})
    }

    if (store.getters.getIsTeacher==1){
        isDisabled.value = true;
    }
</script>

<style scoped>
    .common-layout{
        height: 100%;
    }
    .el-container{
        height: 100%;
    }
    .tac{
        height: 100%;
    }
    .el-menu-vertical-demo{
        height: 100%;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 85vh;
    }

</style>